<template>
  <div class="box">
    <div class="search">
    <form   action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入城市名或拼音"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
</div>
    <div class="hotbox">
      <div class="city-title">热门城市</div>
      <ul class="city-index">
        <!-- 循环拿到热门城市 -->
        <li @click="select(item)"  v-for="(item,index) in hot" :key="index"><div>{{item.name}}</div></li>
      </ul>
    </div>

    <van-index-bar :index-list="Object.keys(cities)">
      <div v-for="(value,key,index) in cities" :key="index">
          <van-index-anchor class="theheader" :index="key">{{key}}</van-index-anchor>
          <van-cell @click="select(item)" :title="item.name" v-for="(item,idx) in value" :key="idx" />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //全部数据
      cities: {},
      //热门城市的数组
      hot:[],
      value: '',
    }
  },
  //挂载前生命周期
  mounted(){
    //发起请求获取到城市的数据
    this.$http.get('city').then(res=>{
      //在data中定义一个空数组把拿到的数据赋值给空数组
      const cities = this.dict(res.data.cities)
      this.cities = cities
      //需要this才能拿到
      //定义一个空数组
      let arr = []
      //循环遍历拿到每一个值
      for(let i=0; i<res.data.cities.length; i++){
        //判断当数据中的ishot的值是1的时候就说明是热门城市
        if(res.data.cities[i].isHot==1){
          //通过push方法将热门城市添加到arr空数组中
          arr.push(res.data.cities[i])
        }
      }
      //在data中定义一个hot数组将刚刚添加到arr中的值赋值给hot中
      this.hot = arr;
      //输出看是否拿到值
      console.log(this.hot)

      // console.log(Object.keys(cities))
      // console.log(cities)
      // console.log(res)
    })
  },
  methods:{
    //点击事件方法
    select(city){
      // console.log(city)
      this.$store.commit('changeCity',city);
      //点击的时候跳转到影院列表
      this.$router.push('/cinema')
    },
 
    dict(data){
      // var data = this.list;
      var field = "pinyin";

      var letter_reg = /^[A-Z]$/;
      var list = new Array();
      for (var i = 0; i < data.length; i++) {
        // 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
        list["#"] = new Array();
        // 首字母 转 大写英文
        var letter = data[i][field].substr(0, 1).toUpperCase();
        // 是否 大写 英文 字母
        if (!letter_reg.test(letter)) {
          letter = "#";
        }
        // 创建 字母 分组
        if (!(letter in list)) {
          list[letter] = new Array();
        }
        // 字母 分组 添加 数据
        list[letter].push(data[i]);
      }
      // 转换 格式 进行 排序；
      var resault = new Array();
      for (var key in list) {
        resault.push({
          letter: key,
          list: list[key],
        });
      }
      resault.sort(function (x, y) {
        return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
      });
      // # 号分组 放最后
      var last_arr = resault[0];
      resault.splice(0, 1);
      resault.push(last_arr);

      // 转换 数据 格式
      var json_sort = {};
      for (var i = 0; i < resault.length; i++) {
        json_sort[resault[i].letter] = resault[i].list;
      }
      // console.log(json_sort);
      return json_sort;
    },
     onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  }
}
</script>


<style scoped>
  .box{
    box-sizing: border-box;
    background-color: #fff;
  }
  
  .hotbox{
    padding-left: 15px;
    padding-top: 15px;
    height: 120px;
  }
  .city-title{
    font-size:13px;
    color: #797d82;
  }
 .city-index{
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
 }
 .city-index>li{
  width: 33.3%;
  text-align: center;
  box-sizing: border-box;
  padding-bottom: 15px;
 }
 .city-index>li>div{
  height: 30px;
  background: #f4f4f4;
  line-height: 30px;
  border-radius: 3px;
  box-sizing: border-box;
  margin: 0 7.5px;
  font-size: 14px;
  color: #191a1b;
 }
 .theheader{
    background: #f4f4f4;
 }
</style>